<#assign propsJson="${propsJson}"?eval />
<template>
  <div style="width: 100%; height:100%" ref="echarts"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
   data() {
    return {
      <#assign map=modelJson[0] />
      <#assign  keys=map?keys/>
      xdata:[<#list modelJson as model>'${ model["${keys[0]}"] }'<#if model_has_next>,</#if></#list>],
      seriesdata:[
      <#list keys as key>
        <#if (key_index > 0)>
          {
            name:'${key}',
            data: [<#list modelJson as model>${ model["${key}"]?c }<#if model_has_next>,</#if></#list>],
            type: 'bar',
            stack: 'bar',
            barCategoryGap: '${propsJson.graphicbargap!'30'}' + '%'
          }
          <#if key_has_next>,</#if>
        </#if>
      </#list>
      ],
      echarts:null
    };
  },
  methods: {
    appendTotalSerires(){
      let extraBarData = [];
      let extraBarText = [];
      const data = this.seriesdata.map(v => v.data)
      const arrSum = arr => arr.reduce((prev, curr) => prev + curr, 0);
      for (let col = 0; col < data[0].length; col++) {
        const values = []
        for (let row = 0; row < data.length; row++) {
          values.push(data[row][col])
        }
        const totalSum = arrSum(values)
        extraBarData.push(totalSum)
        extraBarText.push(values.join(" / "))
      }
      this.seriesdata.unshift(
        {
          name: "总计",
          type: "bar",
          barGap: "-100%",
          hiddenLegend: true,
          data: extraBarData,
          barCategoryGap: '${propsJson.graphicbargap!'30'}' + '%',
          label: {
            show: true,
            position: "right",
            textStyle: {
              fontWeight: "bold",
              fontSize: 14,
              color: "rgba(255, 255, 255, 0.8)",
            },
            formatter: function({ dataIndex }) {
              return extraBarText[dataIndex];
            },
          },
        }
      )
    },
    echartsData() {
      const option = {
        color: [<#list propsJson.graphiccolor as graphiccolor>
          <#if graphiccolor?is_string>
          "${graphiccolor}"<#if graphiccolor_has_next>,</#if><#else><#assign colorkeys=graphiccolor?keys />
          {
          <#list colorkeys as key>
            <#if graphiccolor[key]?is_string>
            ${key}: "${graphiccolor[key]}"<#if key_has_next>,</#if>
            <#elseif graphiccolor[key]?is_number || graphiccolor[key]?is_boolean> 
            ${key}: ${graphiccolor[key]?string}<#if key_has_next>,</#if>
            <#else>
            ${key}: [<#list graphiccolor[key] as colorItem>
              {<#list colorItem?keys as ck>
                <#if colorItem[ck]?is_string>${ck}: "${colorItem[ck]}"<#else>${ck}: ${colorItem[ck]?string}</#if><#if ck_has_next>,</#if>
              </#list>}<#if colorItem_has_next>,</#if></#list>
            ]<#if key_has_next>,</#if>
            </#if>
          </#list>
          },
        </#if></#list>],
        title: {
          show: true,
          text: "${propsJson.titleText!''}",
          left: "10%",
          textStyle: {
            color: "${propsJson.titleColor!'rgba(255,255,255,.8)'}",
            fontSize: ${propsJson.titleSize!'18'},
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: true,
          icon: "rect",
          color: "rgba(255, 255, 255, 0.8)",
          left: "10%",
          top: "15%",
          itemGap: 20,
          textStyle: {
            color: '${propsJson.legendcolor}'
          },
          data: this.seriesdata.filter(v => !v.hiddenLegend).map(v => v.name),
        },
        grid:{
          left:'${'${propsJson.graphicleft}%'}',
          right:'${'${propsJson.graphicright}%'}',
          top:'${'${propsJson.graphictop}%'}',
          bottom:'${'${propsJson.graphicbottom}%'}',
        },
        xAxis: {
          type: 'value',
          axisLine: {
            show:${propsJson.Xhave?string("true","false")},
            lineStyle: {
              color: '${propsJson.Xcolor}'
            }
          },
          splitLine:{
            show:${propsJson.XhaveLine?string("true","false")},
            lineStyle: {    
              color: '${propsJson.Xlinecolor}'
            }
          },
        },
        yAxis: {
          type: 'category',
          data: this.xdata,
          axisLine: {
            show:${propsJson.Yhave?string("true","false")},
            lineStyle: {
              color: '${propsJson.Ycolor}'
            }
          },
          axisTick: {
            show: false
          },
          splitLine:{
            show:${propsJson.YhaveLine?string("true","false")},
            lineStyle: {
              color: '${propsJson.Ylinecolor}'
            }
          },
        },
        label: {
          show: false,
        },
        series: this.seriesdata
      };
      return option;
    },
    renderEcharts(){
        this.echarts = echarts.init(this.$refs.echarts)
        this.echarts.setOption(this.echartsData())
    },
  },
  mounted(){
    this.appendTotalSerires()
    this.$nextTick(function(){
      this.renderEcharts()
    })
  }
};
</script>

<style>
</style>
